<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example: Reusing a YQL query</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Example: Reusing a YQL query</h1>

    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><div class="intro">
<p>In this example, the Flickr Recent Photos YQL table is used to pull in a small set of recent Flickr images every 8 seconds.</p>
</div>

<div class="example">
    <style>
    #res {
        background-color: white;
        border: 1px solid black;
        padding: 2em;
    }
    #res h2 {
        color: black;
    }
    #res h2 em {
        font-size: 60%;
    }
    #res a {
        margin: .25em;
    }
    #res a img {
        border: 1px solid black;
    }
</style>

<div id="res"></div>

<script>
YUI().use('node', 'yql', function(Y) {
    
    var res = Y.one('#res'), count = 0,
        url = '<a href="http://flickr.com/photos/{owner}/{id}"><img src="http://static.flickr.com/{server}/{id}_{secret}_t.jpg"></a>';
    
    var q = Y.YQL('select * from flickr.photos.recent', {
        //Tell JSONP to not cache this request so we get new images on each request
        allowCache: false,
        on: {
            success: function(r) {
                count++;
                res.setContent('<h2>Recent Flickr Photos <em>(query #' + count + ')</em></h2>');
                Y.each(r.query.results.photo, function(v) {
                    res.append(Y.Lang.sub(url, v));
                });
            }
        }
    });
    Y.later(8000, q, q.send, null, true);
});

</script>


</div>
<h3>Setting Up the Query</h3>
<p>The easiest way to build a YQL query is by visiting the <a href="http://developer.yahoo.com/yql/console/">YQL Console</a>. In this example we will be using the <code><a href="http://developer.yahoo.com/yql/console/#h=select%20*%20from%20flickr.photos.recent">flickr.photos.recent</a></code> table. The <code>YQL</code> statement that we are using looks like this:</p>

<pre class="code prettyprint">select * from flickr.photos.recent</pre>


<h3>Setting Up the YUI Instance</h3>
<p>Now we need to create our YUI instance and tell it to load the <code>yql</code> and <code>node</code> modules.</p>

<pre class="code prettyprint">YUI().use(&#x27;node&#x27;, &#x27;yql&#x27;);</pre>


<h3>Making the Query</h3>
<p>Now that we have a YUI instance with the <code>yql</code> module, we can now make a query.</p>

<pre class="code prettyprint">YUI().use(&#x27;node&#x27;, &#x27;yql&#x27;, function(Y) {
    
    var res = Y.one(&#x27;#res&#x27;), count = 0,
        url = &#x27;&lt;a href=&quot;http:&#x2F;&#x2F;flickr.com&#x2F;photos&#x2F;{owner}&#x2F;{id}&quot;&gt;&lt;img src=&quot;http:&#x2F;&#x2F;static.flickr.com&#x2F;{server}&#x2F;{id}_{secret}_t.jpg&quot;&gt;&lt;&#x2F;a&gt;&#x27;;
    
    var q = Y.YQL(&#x27;select * from flickr.photos.recent&#x27;, {
        &#x2F;&#x2F;Tell JSONP to not cache this request so we get new images on each request
        allowCache: false,
        on: {
            success: function(r) {
                count++;
                res.setContent(&#x27;&lt;h2&gt;Recent Flickr Photos &lt;em&gt;(query #&#x27; + count + &#x27;)&lt;&#x2F;em&gt;&lt;&#x2F;h2&gt;&#x27;);
                Y.each(r.query.results.photo, function(v) {
                    res.append(Y.Lang.sub(url, v));
                });
            }
        }
    });
    Y.later(8000, q, q.send, null, true);
});</pre>

</div>
        </div>

        <div id="sidebar" class="yui3-u">
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="Create a simple YQL Query to retrieve data from the Yahoo! Weather YQL table.">
                                        <a href="simple-yql.html">Simple YQL Query</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Use the Flickr Recent Photos YQL table to pull in a small set of recent Flickr images every 8 seconds.">
                                        <a href="yql-requery.html">Reusing a YQL query</a>
                                    </li>
                                
                            
                                
                            
                                
                            
                        </ul>
                    </div>
                </div>
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples That Use This Component</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                            
                                
                            
                                
                                    <li data-description="Example Photo Browser application.">
                                        <a href="../dd/photo-browser.html">Photo Browser</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Portal style example using Drag &amp; Drop Event Bubbling and Animation.">
                                        <a href="../dd/portal-drag.html">Portal Style Example</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
